<!--
 * @Description: 
 * @Date: 2025-08-15 10:06:26
 * @LastEditTime: 2025-09-18 10:00:15
-->
<template>
  <van-nav-bar title="营服助手"></van-nav-bar>
  <div class="container mx-auto px-4 pt-8 pb-20 max-w-3xl">
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-indigo-600">延移智问</h1>
      <p class="text-gray-500 mt-2">企业内部服务工具</p>
    </div>

    <!-- 手机号查询区域 -->
    <div class="glassmorphism p-6 mb-8 fade-in">
      <!-- <div class="mb-3">
        <van-tabs type="card" color="#4f46e5">
        <van-tab title="手机号"></van-tab>
        <van-tab title="身份证"></van-tab>
      </van-tabs>
      </div> -->

      <h2 class="text-xl font-semibold mb-4 text-gray-700">手机号查询</h2>
      <div class="flex flex-col md:flex-row gap-4">
        <input v-model="inputValue" type="tel" placeholder="请输入手机号码"
          class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all"
          maxlength="11">
        <button @click="handleSearch"
          class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
          <i class="fa fa-search mr-2"></i>查询
        </button>
      </div>
    </div>

    <!-- 菜单选项 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="glassmorphism p-6 card-hover fade-in" style="animation-delay: 0.1s;">
        <div class="pretty-html" v-html="userInfo" v-if="userInfo"></div>
        <van-empty v-else description="暂无内容请查询" />
      </div>
    </div>

    <!-- 用户画像 -->
    <!-- <div class="glassmorphism p-6 card-hover fade-in" style="animation-delay: 0.3s;"
        @click="router.push('/userPortrait')">
        <div class="flex items-center menu-item cursor-pointer p-3 rounded-lg">
          <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
            <i class="fa fa-2x fa-address-card text-xl"></i>
          </div>
          <div class="text-left">
            <h3 class="font-semibold text-gray-800  text-lg">AI用户画像</h3>
            <p class="text-sm text-gray-500">分析用户特征标签</p>
          </div>
        </div>
      </div> -->

    <!-- 行为轨道 -->
    <!-- <div class="glassmorphism p-6 card-hover fade-in" style="animation-delay: 0.2s;"
        @click="router.push('/policyEngine')">
        <div class="flex items-center menu-item cursor-pointer p-3 rounded-lg">
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
            <i class="fa fa-2x fa-map text-xl"></i>
          </div>
          <div class="text-left">
            <h3 class="font-semibold text-gray-800 text-lg">策略引擎</h3>
            <p class="text-sm text-gray-500">追踪用户行为轨迹</p>
          </div>
        </div>
      </div> -->



    <!-- 业务推荐 -->
    <!-- <div class="glassmorphism p-6 card-hover fade-in" style="animation-delay: 0.4s;"
        @click="router.push('/marketingProgram')">
        <div class="flex items-center menu-item cursor-pointer p-3 rounded-lg">
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
            <i class="fa fa-2x fa-lightbulb-o text-xl"></i>
          </div>
          <div class="text-left">
            <h3 class="font-semibold text-gray-800 text-lg">营销方案</h3>
            <p class="text-sm text-gray-500">个性化业务推荐</p>
          </div>
        </div>
      </div> -->

    <!-- 笔算 -->
    <!-- <div class="glassmorphism p-6 card-hover fade-in" style="animation-delay: 0.5s;">
        <div class="flex items-center menu-item cursor-pointer p-3 rounded-lg">
          <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mr-4">
            <i class="fa fa-2x fa-calculator text-xl"></i>
          </div>
          <div>
            <h3 class="font-semibold text-gray-800">笔算</h3>
            <p class="text-sm text-gray-500">业务计算工具</p>
          </div>
        </div>
      </div> -->

  </div>

  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="goToPage('main')">首页</van-tabbar-item>
    <van-tabbar-item icon="setting-o" @click="goToPage('settings')">设置</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { getUserInfo } from "../api/user";
import { ref, toRaw, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { useStore } from 'vuex'
import emitter from '../utils/eventBus'
import { getInfo } from "../api/user"
import ReconnectingWebSocket from 'reconnecting-websocket';
defineProps({
  msg: String,
});
const store = useStore()
const inputValue = ref(store.getters.phone)
const count = ref(0);
const router = useRouter();
const userInfo = ref("")
const handleSearch = () => {
  const regex = /^1\d{10}$/; // 中国手机号正则表达式
  if (!regex.test(inputValue.value)) {
    Toast.fail("请输入有效的手机号")
  } else {
    Toast.loading({
      duration: 0,
      mask: true,
      message: '加载中...'
    });
    userInfo.value = ""
    socket.value.send(inputValue.value);
    

  }
}
const socket = ref()
const active = ref(0);
const goToPage = (name) => {
  switch (name) {
    case "main":
      router.push("Main");
      break;
    case "settings":
      router.push("Settings");
      break;
  }
};



onMounted(() => {
  initWebSocket()
})
onUnmounted(() => {
  if (socket.value) {
    socket.value.close()
  }
})
const initWebSocket = () => {
  // 连接后端 WebSocket 服务
  //const wsUrl = 'ws://localhost:8950/ws/18700114368'; 
  const wsUrl = 'ws://sn.wgt.10086.cn/snsst/chudayi/ya/checkup/wsApi/ws/18700114368'; // 对应后端 @ServerEndpoint 的 value
  const options = {
    // WebSocket: WebSocket, // 允许你指定一个自定义的 WebSocket 构造函数，通常用于在不同环境中使用不同的 WebSocket 实现
    connectionTimeout: 10000, // 连接初始尝试的超时时间 10000
    maxRetries: 100, // 连接失败后，最大允许的重试次数 100
    maxReconnectionDelay: 10000, // 这是连接重试之间的最大延迟
    minReconnectionDelay: 1000, // 连接重试之间的最小延迟  
    automaticOpen: true,  // 自动连接
    debug: false // enables debug output
  };

  // 方案1：使用原生 WebSocket
  socket.value = new ReconnectingWebSocket(wsUrl, [], options);


  socket.value.onopen = (event) => {
    console.log('WebSocket 连接成功', event);

  };
  // 接收消息
  socket.value.onmessage = (event) => {
    Toast.clear()
    let response = JSON.parse(event.data)
    console.log(response.content, "接受参数")
    console.log(response.content.charCodeAt(0))
    if(response.content == "**" ){
      response.content="\n"
    }
    userInfo.value += response.content





  };
  // 连接关闭
  socket.value.onclose = (event) => {
    console.log('WebSocket 连接关闭', event);
  };
  // 连接错误
  socket.value.onerror = (error) => {
    console.error('WebSocket 错误', error);
  };
}
const sendMessage = () => {
 
}



</script>

<style scoped>
:deep(.van-search__content) {
  border: 1px solid #d1d5db;
  border-radius: 5px;
}

.glassmorphism {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.menu-item {
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: rgba(99, 102, 241, 0.1);
  transform: translateX(5px);
}

.input-focus:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.pretty-html {
  white-space: pre-wrap;
  /* 保留空格和换行，并允许自动换行 */
  text-align: left;
}
</style>
